import PlaceHolderCpn from '@/components/PlaceHolderCpn';
import { getOperatorByIccid, handleTime } from '@/utils/utils';
import type { ProDescriptionsItemProps } from '@ant-design/pro-components';
import { ProDescriptions } from '@ant-design/pro-components';
import { Tag } from 'antd';
import type { PatrolDeviceTableItem } from '../types';

export default (props: { patrolDevice: PatrolDeviceTableItem }) => {
  const { patrolDevice } = props;
  const primaryColumns: ProDescriptionsItemProps<PatrolDeviceTableItem>[] = [
    {
      title: '流量卡运营商',
      dataIndex: 'iccid',
      render: (_, record) =>
        record.iccid ? (
          <Tag>{getOperatorByIccid(record.iccid)}</Tag>
        ) : (
          <PlaceHolderCpn text="暂无数据" />
        ),
    },
    {
      title: '流量卡过期时间',
      valueType: 'date',
      dataIndex: 'iccidExpiredTime',
      render: (_, record) =>
        record.iccidExpiredTime ? (
          handleTime(record.iccidExpiredTime, 'YYYY-MM-DD')
        ) : (
          <PlaceHolderCpn text="暂无数据" />
        ),
    },
    {
      title: '设备型号',
      dataIndex: 'deviceModel',
      render: (_, record) => record.deviceModel || <PlaceHolderCpn text="暂无数据" />,
    },
    {
      title: '生产厂家',
      dataIndex: 'manufacturer',
      render: (_, record) => record.manufacturer || <PlaceHolderCpn text="暂无数据" />,
    },
  ];
  return (
    <div
      style={{
        background: '#fff',
        padding: '20px 20px 0px',
        border: '1px solid #f0f0f0',
        borderRadius: '6px',
      }}
    >
      <ProDescriptions column={3} columns={primaryColumns} dataSource={patrolDevice} />
    </div>
  );
};
